<template>
	<div class="logo" :style="{display:display}">
		<div class="bg dragon" :class="style"></div>
		<p v-html="title"></p>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import constObj from '../unit/const.js';
	let {
		i18n,
		lan
	} = constObj;
	let timeout = null;
	export default {
		name: 'Logo',
		props: {
			cur: {
				type: Boolean
			},
		},
		data() {
			return {
				i18n: i18n,
				lan: lan,
				style: "r1",
				display: 'none',
			};
		},
		watch: {
			reset(newVal, oldVal) {
				this.animate();
			},
			cur(newVal, oldVal) {
				console.log("logo",newVal)
				if (newVal) {
					this.animate();
				}
			}
		},
		beforeCreate() {

		},
		beforeMount() {
			// this.animate();
		},
		computed: {
			title() {
				return this.i18n.titleCenter[this.lan];
			},
			...mapState({
				reset: (state) => {
					return state.reset;
				},
			})
		},
		methods: {
			animate() {
				clearTimeout(timeout);
				this.style = "r1";
				this.display = "none";
				if (this.cur || this.reset) {
					this.display = "none";
					return;
				}

				let m = 'r'; // 方向
				let count = 0;

				const set = (func, delay) => {
					if (!func) {
						return;
					}
					timeout = setTimeout(func, delay);
				};

				const showAndHide = (func, times) => {
					let t = 0;
					const allTimes = times % 2 === 0 ? (times + 1) : times;
					const fn = () => {
						set(() => {
							this.display = (t % 2 === 0 ? 'block' : 'none');
							t++;
							if (func && t === allTimes) {
								func();
							} else {
								fn();
							}
						}, 150);
					};
					fn();
				};

				const eyes = (func, delay1, delay2) => { // 龙在眨眼睛
					set(() => {
						this.style = m + 2;
						set(() => {
							this.style = m + 1;
							if (func) {
								func();
							}
						}, delay2);
					}, delay1);
				};

				const run = (func) => { // 开始跑步啦！
					set(() => {
						this.style = m + 4;
						set(() => {
							this.style = m + 3;
							count++;
							if (count === 10 || count === 20 || count === 30) {
								m = m === 'r' ? 'l' : 'r';
							}
							if (count < 40) {
								run(func);
								return;
							}
							this.style = m + 1;
							if (func) {
								set(func, 4000);
							}
						}, 100);
					}, 100);
				};

				const dra = () => {
					count = 0;
					eyes(() => {
						eyes(() => {
							eyes(() => {
								this.style = m + 2;
								run(dra);
							}, 150, 150);
						}, 150, 150);
					}, 1000, 1500);
				};

				showAndHide(() => {
					dra();
				}, 5);
			}
		}
	}
</script>

<style lang="less" scoped>
	.logo {
		width: 224px;
		height: 200px;
		position: absolute;
		top: 100px;
		left: 12px;
		text-align: center;
		overflow: hidden;

		p {
			position: absolute;
			width: 100%;
			line-height: 1.4;
			top: 100px;
			left: 0;
			font-family: initial;
			letter-spacing: 6px;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, .35);
		}

		.dragon {
			width: 80px;
			height: 86px;
			margin: 0 auto;
			background-position: 0 -100px;

			&.r1,
			&.l1 {
				background-position: 0 -100px;
			}

			&.r2,
			&.l2 {
				background-position: -100px -100px;
			}

			&.r3,
			&.l3 {
				background-position: -200px -100px;
			}

			&.r4,
			&.l4 {
				background-position: -300px -100px;
			}

			&.l1,
			&.l2,
			&.l3,
			&.l4 {
				transform: scale(-1, 1);
				-webkit-transform: scale(-1, 1);
				-ms-transform: scale(-1, 1);
				-moz-transform: scale(-1, 1);
				-o-transform: scale(-1, 1);
			}
		}
	}
</style>
